Vite+Electron |
您所在的位置：网站首页 › electron 文件操作 › Vite+Electron |
Vite+Electron
|
本文参考 作者：Kuari zhuanlan.zhihu.com/p/421460116 关于踩坑补坑记录见文章末尾 六 二. 创建一个Vite项目 1. 安装 vite yarn create vite 复制代码 2. 创建项目创建命令如下： yarn create vite --template vue 复制代码此处创建一个项目，名为kuari。 yarn create vite kuari --template vue 复制代码 3. 进入且运行进入项目，在运行前需要先安装下依赖。 cd kuari yarn install yarn dev 复制代码 三. 配置Electron 1. 官方文档在Electron官网的快速入门文档中，有官方给出的利用html、javascript、css来创建一个electron应用的案例，vite+electron的方案也借鉴其中。 2. 安装首先安装electron至vite应用。目前electron的版本为^20.0.2 yarn add --dev electron 复制代码 3. 配置文件 1）vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // 新增 // https://vitejs.dev/config/ export default defineConfig({ base: path.resolve(__dirname, './dist/'), // 新增 plugins: [vue()] }) 复制代码 2）main.js创建一个新的文件main.js，需要注意的是，该内容中index.html的加载路径跟electron官网给的配置不同。 // main.js // 控制应用生命周期和创建原生浏览器窗口的模组 const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 加载 index.html mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意 // 打开开发工具 // mainWindow.webContents.openDevTools() } // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他 // 打开的窗口，那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在 // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // 在这个文件中，你可以包含应用程序剩余的所有部分的代码， // 也可以拆分成几个文件，然后用 require 导入。 复制代码 3）preload.js创建一个新的文件preload.js。 // preload.js // 所有Node.js API都可以在预加载过程中使用。 // 它拥有与Chrome扩展一样的沙盒。 window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const dependency of ['chrome', 'node', 'electron']) { replaceText(`${dependency}-version`, process.versions[dependency]) } }) 复制代码 4）package.json为了确保能够运行相关electron的命令，需要修改package.json文件。 首先需要去设置main属性，electron默认会去在开始时寻找项目根目录下的index.js文件，此处我们使用的是main.js，所以需要去定义下。 // package.json { "name": "kuari", "version": "0.0.0", "main": "main.js", // 新增 "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "electron": "^15.1.2", "vite": "^2.6.4" } } 复制代码最后我们需要新增electron的运行命令。 // package.json { "name": "kuari", "version": "0.0.0", "main": "main.js", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview", "electron:serve": "electron ." // 新增 }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "electron": "^15.1.2", "vite": "^2.6.4" } } 复制代码 5） 运行直接在终端输入如下命令： yarn electron:serve 复制代码接着我们就可以看到我们桌面应用就出来咯！ 五. 动态模块热重载 1. 思路先说结论，可利用electron中的mainWindow.loadURL()来实现。 对于动态模块热重载功能来说，无论是webpack还是vite，其都是将构建内容存入内存，因此我们无法使用mainWindow.loadFile('dist/index.html')这样加载文件的方式。 但是，单纯地改变该配置也是不行的，需要使用vite将开发服务器运行起来，可以正常运行动态模块热重载，而electron直接加载其开发服务器可访问的url，即http://localhost:3000。 2 . 编辑 main.js将mainWindow.loadFile('dist/index.html')更新为mainWindow.loadURL("http://localhost:3000")，更新后的文件如下所示： // main.js // 控制应用生命周期和创建原生浏览器窗口的模组 const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 加载 index.html // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url mainWindow.loadURL("http://localhost:3000") // 打开开发工具 // mainWindow.webContents.openDevTools() } // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他 // 打开的窗口，那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在 // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // 在这个文件中，你可以包含应用程序剩余的所有部分的代码， // 也可以拆分成几个文件，然后用 require 导入。 复制代码 3. 编辑vite.config.js修改文件vite.config.js的base，修改后的文件如下所示： // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ base: "./", // 新增 plugins: [vue()] }) 复制代码 4. 同时开启vite和electron服为了使vite和electron正常运行，需要先运行vite，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。 此处需要安装两个库： concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程 wait-on：等待资源，此处用来等待url可访问首先来安装。 yarn add -D concurrently wait-on 复制代码接着更新文件package.json，scripts新增两条命令： "scripts": { "electron": "wait-on tcp:3000 && electron .", "electron:serve": "concurrently -k "yarn dev" "yarn electron"" }, 复制代码更新后完整内容如下： { "name": "kuari", "version": "0.0.0", "main": "main.js", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview", "electron": "wait-on tcp:3000 && electron .", "electron:serve": "concurrently -k "npm run dev" "npm run electron"" }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "concurrently": "^6.3.0", "cross-env": "^7.0.3", "electron": "^15.1.2", "vite": "^2.6.4", "wait-on": "^6.0.0" } } 复制代码 5. 运行现已添加两条命令： yarn electron为等待tcp协议3000端口可访问，然后执行electron yarn electron:serve为阻塞执行开发服务器运行和yarn electron命令运行项目只要执行命令yarn electron:serve即可，当修改项目文件时，桌面应用也将自动更 五. 打包 1. 环境变量此处使用环境变量NODE_ENV来切换生产和开发环境，生产环境为NODE_ENV=production，开发环境为NODE_ENV=development，若有其它如release等环境可在此基础上拓展。 2. 创建electron文件夹在项目根目录下创建文件夹electron，将main.js和preload.js文件移动进来。其结构如下所示： ├── electron │ ├── main.js │ └── preload.js ... 复制代码若还是不太明白可以看看源码中文件结构。 3. 编辑electron/main.js该文件主要是需要根据环境变量切换electron加载的内容，修改内容如下： mainWindow.loadURL( NODE_ENV === 'development' ? 'http://localhost:3000' :`file://${path.join(__dirname, '../dist/index.html')}` ); 复制代码修改后的完整内容如下： // electron/main.js // 控制应用生命周期和创建原生浏览器窗口的模组 const { app, BrowserWindow } = require('electron') const path = require('path') const NODE_ENV = process.env.NODE_ENV function createWindow () { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 加载 index.html // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url mainWindow.loadURL( NODE_ENV === 'development' ? 'http://localhost:3000' :`file://${path.join(__dirname, '../dist/index.html')}` ); // 打开开发工具 if (NODE_ENV === "development") { mainWindow.webContents.openDevTools() } } // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他 // 打开的窗口，那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在 // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // 在这个文件中，你可以包含应用程序剩余的所有部分的代码， // 也可以拆分成几个文件，然后用 require 导入。 复制代码 4. 编辑package.json首先修改main 属性，将main: main.js改为main: electron/main.js。 { "name": "kuari", "version": "0.0.0", "main": "electron/main.js", // ... } 复制代码接着，编辑build属性： "build": { "appId": "com.your-website.your-app", "productName": "ElectronApp", "copyright": "Copyright © 2021 ", "mac": { "category": "public.app-category.utilities" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true }, "files": [ "dist/**/*", "electron/**/*" ], "directories": { "buildResources": "assets", "output": "dist_electron" } } 复制代码然后，更新scripts属性。 此处需要先安装两个库： cross-env: 该库让开发者只需要注重环境变量的设置，而无需担心平台设置 electron-builder: electron打包库 yarn add -D cross-env electron-builder 复制代码更新后的scripts如下： { "dev": "vite", "build": "vite build", "serve": "vite preview", "electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", // 此处需要设置环境变量以保证开发时加载url "electron:serve": "concurrently -k "yarn dev" "yarn electron"", "electron:build": "vite build && electron-builder" // 新增打包命令 } 复制代码最后，更新后的package.json完整内容如下： { "name": "kuari", "version": "0.0.0", "main": "electron/main.js", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview", "electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", "electron:serve": "concurrently -k "yarn dev" "yarn electron"", "electron:build": "vite build && electron-builder" }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "concurrently": "^6.3.0", "cross-env": "^7.0.3", "electron": "^15.1.2", "electron-builder": "^22.13.1", "vite": "^2.6.4", "wait-on": "^6.0.0" }, "build": { "appId": "com.my-website.my-app",//appId "productName": "MyApp",//程序名称 "asar":true,//压缩代码打包 "copyright": "Copyright © 2021 kuari", "mac": {//mac 相关配置 "category": "public.app-category.utilities" }, "win":{//windows 相关配置 "icon":"./static/img/grapecity.ico",//图标路径，注意图标格式必须是ico才行 "target":"nsis"//目标安装包 }, "nsis": { "oneClick": false,//是否一键安装 "allowToChangeInstallationDirectory": true,//允许修改安装目录 "installerIcon":"./static/img/grapecity.ico",//安装图标 "uninstallerIcon":"./static/img/grapecity.ico",//卸载图标 "createDesktopshortcut":true,//创建桌面图标 "createStartMenuShortcut:true,//创建开始菜单图标 }, "files": [ "dist/**/*", "electron/**/*" ], "directories": {//输出文件夹 "buildResources": "assets", "output": "dist_electron" } } } 复制代码 5. 打包直接执行打包命令即可开始打包。 yarn electron:build 复制代码打包完成之后，会多出两个文件夹dist和dist_electron，其文件结构如下： ├── dist │ ├── assets │ ├── favicon.ico │ └── index.html ├── dist_electron │ ├── MyApp-0.0.0-mac.zip │ ├── MyApp-0.0.0-mac.zip.blockmap │ ├── MyApp-0.0.0.dmg │ ├── MyApp-0.0.0.dmg.blockmap │ ├── builder-debug.yml │ ├── builder-effective-config.yaml │ └── mac ... 复制代码至此，便完成了打包。 后面再来写写关于electron的优化，减少electron打包后应用的体积。（这玩意儿确实打包下来有点大呢/狗头） 六 踩坑补坑记录1、package.json里的lib参数删除 2、项目目录不允许有中文，否则不能下载打包依赖，导致无法打包 3、每次打包软件前都可能缺失依赖包，需要手动在package.json文件里的dependencies填写依赖名称和版本 4、打包软件时不能出现本软件运行状态（CsszView），需要从任务管理器关闭，否则将会打包失败,（builder文件夹为打包结束后生成的程序） 5、打包出错请删除 builder 文件夹 （名字过长无法覆盖删除，需强行粉碎或压缩文件为zip并选择删除源文件） 6、打包加密忽略配置 "asarUnpack": [ "**/node_modules/iconv-lite/**/*", "**/node_modules/ip/**/*", "**/node_modules/ws/**/*", "**/node_modules/koa/**/*", "**/node_modules/koa-router/**/*", "**/node_modules/koa-static/**/*", "**/node_modules/path/**/*", "**/web/**/*" ], "extraResources": [ { "from": "./web", "to": "app.asar.unpacked/web" } ], 复制代码7、打包取消加密 "build": { "asar": false } 复制代码8、打包文件添加配置 "build": { "files": [ "web/**", "main.js", "preload.js", "config.js" ] } 复制代码9、报错信息 was compiled against a different Node.js version using node版本与electron版本不一致导致报错 //electron端查看版本 console.log("node:", process.versions.node) console.log("electron:", process.versions.electron) console.log("modules:", process.versions.modules) 复制代码 cnpm rebuild --runtime=electron --target=15.3.0 --disturl=https://atom.io/download/atom-shell --abi=98 复制代码15.3.0是你的electron版本，98是modules node 16.5.0 electron 15.3.0 modules 98（此版本程序解决成功） 10、@serialport串口通讯模块包找不到路径 electron不能引入相对路径，换成绝对路径写法 ./node_modules/serialport/node_modules/@serialport/parser-delimiter 复制代码 11、串口数据间断配置因为传递的数据是不间断的，需要拼接数据 第一种方法用前端防抖节流做，第二种是内置方法配置间断符 ‘/n’ 为换行符，实际需什么符得看传回数据共同点 //配置间断符 const parser = serialPort.pipe(new Delimiter({ delimiter: '.' })) //串口设备传来的数据 是buffer对象，用toString转一下码 parser.on('data', function (data) { console.log(data.toString()); }) 复制代码 12、打包软件时出现的文件缺失下载的文件如果需要其他版本，直接修改链接中的版本号即可！！！ cannot resolve https://npm.taobao.org/mirrors/electron/15.3.4/electron-v15.3.4-win32-x64.zip: status code 404 复制代码打包时下载electron-v.xxxx.zip文件失败
下载完成后放在C:\Users\Administrator\AppData\Local\electron\Cache这个目录下 打包时下载winCodeSign-v.xxx.7z文件失败 下载地址：github.com/electron-us… 下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign目录下 打包时下载nsis-v.xxx.7z文件失败
下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis 打包时下载nsis-resources-v.xxx.7z文件失败
下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1 报错：Error: C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis- 3.0.3.2\Bin\makensis.exe exited with code 1Output: 解决：electron项目路径不能有中文！ 14、打包支持中文路径解决：打开 C:\Users\Administrator\AppData\Roaming\npm\node_modules\electron- builder\node_modules\app-builder-lib\out\targets\nsis/NsisTarget.js文件，在 executeMakensis 方法中加入 我们所需的参数args.push(“-INPUTCHARSET”, “UTF8”); 原文链接：blog.csdn.net/kyq0417/art… 15、出错Fatal error: Unable to commit changes错误原因：电脑开着杀毒软件或者C盘存储空间不足的情况下导致 解决方法:把所有的杀毒软件退出，清理一下磁盘。再重新打包。 16、使用 electron-store 报错解决方法：降版本 “electron-store”: “^4.0.0” 17、使用 electron 加密打包后 fs模块无法读写操作electron-store做数据存储，或者自行把路径分割。 18、注册无反应报错error:1e000065:Cipher functions:OPENSSL_internal:BAD_DECRYPT 解决：双向加密密钥不对称 19、electron程序闪退，打不开报错gpu_data_manager_impl_private.cc(231)] SetSecurityInfo returned 5 解决：卸载360！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 20、导致electron-V.xxxx.zip下载失败因为NPM在国内比较慢。导致electron-V.xxxx.zip下载失败。这些东西如果是第一次打包的话是需要下载对应electron版本的支持文件。
解决方法：安装electron-rebuild 用于重新编译c++原生模块 npm install --save-dev electron-rebuild 复制代码对serialport重新编译 .\node_modules.bin\electron-rebuild.cmd 复制代码 node-gyp rebuild --arch=ia32 复制代码 22、打包运行出现Cannot find module ‘has-symbols’ npm i has-symbols -g 复制代码需要全局下载此包，然后在package.json中加上此包。 遇到一些没有调用过的包时，打包后报错无法加载没有调用过的包，需要手动下载包和写进package.json 23、出现闪退 [9456:0425/180145.834:ERROR:gpu_process_host.cc(951)] GPU process launch failed: error_code=18 [9456:0425/180145.834:FATAL:gpu_data_manager_impl_private.cc(417)] GPU process isn't usable. Goodbye. 复制代码解决：从package.json删掉"requestedExecutionLevel": “requireAdministrator” |
【本文地址】
今日新闻 |
推荐新闻 |